<template>
  <div>
    <div>
      <el-button @click="handleAddRole" class="adds">新增角色</el-button>
    </div>
    <el-table
      ref="tableRef"
      :data="roles"
      tooltip-effect="dark"
      style="width: 100%; border-radius: 10px; margin-top: 10px"
      v-loading="loading"
    >
      <el-table-column label="id" width="100">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="角色名称" width="100">
        <template slot-scope="scope">{{ scope.row.roleName }}</template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditRole(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            @click="handleAssignMenus(scope.$index, scope.row)"
            >分配权限</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDeleteRole(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 用户新增 -->
    <roleAddedit
      ref="roleAddRef"
      @closeAddDialog="closeAddDialog"
      :addVisible="addVisible"
      :title="title"
    ></roleAddedit>
    <!--  -->
    <AssignMenu
      ref="assignMenuRef"
      @closeAddDialog="closeAddDialog"
      :menuVisible="menuVisible"
    ></AssignMenu>
  </div>
</template>
  
  <script>
import { rolesApi, delRoleApi } from "@/Api/RoleApi";
import delay from "@/utils/delay";
import roleAddedit from "@/components/role/roleAddedit.vue";
import AssignMenu from "@/components/role/AssignMenu.vue";

export default {
  data() {
    return {
      roles: [],

      //用户数组
      loading: false,
      addVisible: false,
      //新增修改标题
      title: "",
      //分配角色显示与隐藏
      menuVisible: false,
      roleVisible: false,
    };
  },
  components: {
    roleAddedit,
    AssignMenu,
  },
  mounted() {
    this.loadRoles();
  },
  methods: {
    async loadRoles() {
      try {
        this.loading = true;
        const res = await rolesApi();
        await delay();
        if (res.status == 200) {
          this.roles = res.data;

          this.loading = false;
        } else {
          this.loading = false;
          this.$message({
            message: res.msg,
            type: "error",
            duration: 1000,
          });
        }
      } catch (error) {
        this.loading = false;
        console.log(error);
        this.$message({
          message: "系统异常",
          type: "error",
          duration: 1000,
        });
      }
    },
    //新增
    handleAddRole() {
      this.addVisible = true;
      this.title = "新增角色";

      this.$refs.roleAddRef.openDialog();
    },
    //修改
    handleEditRole(index, row) {
      this.addVisible = true;
      this.title = "修改角色";

      this.$refs.roleAddRef.openDialog(row.id);
    },
    //分配菜单
    handleAssignMenus(index, row) {
      this.menuVisible = true;
      this.$refs.assignMenuRef.openDialog(row.id);
    },
    //删除
    async handleDeleteRole(index, row) {
      this.$confirm(`是否要删除角色${row.roleName}?`, "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const res = await delRoleApi(row.id);

            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
                duration: 1000,
                onClose: () => {
                  this.loadRoles();
                },
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
                duration: 1000,
              });
            }
          } catch (error) {
            console.log(error);
            this.$message({
              message: "系统异常",
              type: "error",
              duration: 1000,
            });
          }

          //
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //关闭新增窗口
    closeAddDialog(isReflash = false) {
      this.addVisible = false;
      isReflash && this.loadRoles();
      this.roleVisible = false;
      this.menuVisible = false;
    },
  },
};
</script>
  
  <style lang="less" scoped>
.adds {
  margin-top: 10px;
  width: 100px;
  border-radius: 6px;
}
// .page {
//   width: 600px;
//   height: 32px;
//   margin: 10px auto;
// }
</style>